iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 15
1
Modern Web

學習 vue 30天系列 第 15

Vue 15 進階模板語法介紹 (1) - 資料細節及動態切換 class name 及 style 多種方法

  • 分享至 

  • xImage
  •  

資料細節說明

{{}}

這是資料雙向綁定的方法,在 {{}} 包含 HTML 的變數或是直接打 HTML 在裡面都只會呈現純文字而已,如果要顯示出 HTML 的元素的話可以改用 v-html=變數 就可以顯示出 HTML 元素了。

補充說明:
在官網上有說到https://ithelp.ithome.com.tw/upload/images/20190915/20109609fKeCWifx13.png

{{表達式}}

{{}} 這個裡面可以寫 JS 讓他回傳一個值,例如:

//兩個字串相加,輸出:這是一段文字<span class='text-danger'>紅色文字</span>
{{text+rawHtml}}

//可以用 JS 的 method 寫在 {{}} 裡
{{text.split('').reverse().join()}} 

//數值的運算也可以在這裡完成
{{number1+number2}} 

var app = new Vue({
    el: '#app',
    data: {
        text: '這是一段文字',
        rawHtml: `<span class="text-danger">紅色文字</span>`,
        number1: 100,
        number2: 300,
        htmlId: 'HTMLID',
        isDisabled: true
    },
});

v-text

這是用指令的方式顯示出資料,這跟 {{}} 很像,但不同的地方是 {{}} 並不會額外有 HTML 在裡面, v-text 就會多跑出一個元素。

因為是指令所以可以用其他 vue API 來搭配,例如想讓資料在輸入的時候只綁定一次用 v-once,就可以讓設定的地方輸出一次。

v-bind

可以綁定個類型的 HTML 屬性或是 class、id 等等選擇器。

<p v-bind:id="htmlId">請綁定上 ID</p>

//把 isDisabled 改成 false 就會取消 disable 效果

<input :disabled="isDisabled" type="text" class="form-control" placeholder="請在此加上動態 disabled">

var app = new Vue({
    el: '#app',
    data: {
        htmlId: 'HTMLID',
        isDisabled: true
    },
});

動態切換 class name 及 style 多種方法

物件:

在 CSS 中設定好的樣式要動態的加入或切換可以用 v-bind:class={'class name':切換值(boolean)},因為是物件所以可以插入一個以上的值在裡面,加入的方式就跟物件一樣用 隔開就行了。

<div class="box" :class="{'rotate':isTransform,'bg-danger':boxColor}"></div>

<button class="btn btn-outline-primary" v-on:click="isTransform = !isTransform">選轉物件</button>

<input type="checkbox" class="form-check-input" id="classToggle1" v-model="boxColor">

var app = new Vue({
    el: '#app',
    data: {
        isTransform: false,
        boxColor: false,
    },
});

<style>
    .box {
        transition: all .5s;
    }

    .box.rotate {
        transform: rotate(45deg)
    }
</style>

以上是在 DOM 上寫入物件,當然也可以把 class 物件存在 vue instance 裡的 data 內來帶入。

當我們把 objectClass 綁定到元素上的時候,跟換的內裡的值在 button 上用 v-on:clickcheckBox 上用 v-model

<div class="box" :class="objectClass"></div>

<button class="btn btn-outline-primary" v-on:click="objectClass.rotate = !objectClass.rotate">選轉物件</button>

// 一般來說我們常用到『點記法』來抓取 obj 裡的某屬性,但屬性中間有 - 就要改用『括弧記法』來取得值
<input type="checkbox" class="form-check-input" id="classToggle2" v-model="objectClass['bg-danger']">

var app = new Vue({
    el: '#app',
    data: {
        objectClass: {
            'rotate': false,
            'bg-danger': false,
        }
    },
});

陣列:

陣列加入 class name 適用於 class name 長度比較不一定時使用,可以用兩種陣列方式加入 class ,和物件一樣寫在 DOM 上或是寫在 vue instance data 中來加入 class。

// 寫在 DOM 上方式
<button class="btn" :class="['btn-outline-primary','active']">請操作本元件</button>

// 寫在 data 裡的方式,可以用 checkbox 和 v-model 動態加入值,藉此加上 class name
<button class="btn" :class="arrayClass">請操作本元件</button>

<input type="checkbox" class="form-check-input" id="classToggle3" v-model="arrayClass" value="btn-outline-primary">

<input type="checkbox" class="form-check-input" id="classToggle4" v-model="arrayClass" value="active">

var app = new Vue({
    el: '#app',
    data: {
        arrayClass: []
    },
});

:style

在我看來跟寫 style 在 DOM 上很像,但這邊用物件或陣列來帶入。

// 原本是 background-color 在 vue 把 - 拿掉改用駝峰式命名法來寫入樣式
<div class="box" :style="{'backgroundColor':'red'}"></div>

// 用物件帶入
<div class="box" :style="styleObject"></div>

// 陣列帶入不是用單一值,而是插入完整的物件(和第一個樣),或是帶入物件變數也可以
<div class="box" :style="[{'backgroundColor':'red'}]"></div>

var app = new Vue({
    el: '#app',
    data: {
        styleObject: {
            backgroundColor: 'red',
            borderWidth: '5px'
        },
        styleObject2: {
            boxShadow: '3px 3px 5px rgba(0, 0, 0, 0.16)'
        }
    },
});

vue 會自動加入 prefix

有時候會需要用到 prefix 才能保整每個瀏覽器運行起來一樣,vue 他不需要在加入樣式時打 prefix。

safari
https://ithelp.ithome.com.tw/upload/images/20190915/20109609LBYIS1XiDU.png

chrome
https://ithelp.ithome.com.tw/upload/images/20190915/20109609plDBFRCGfv.png


上一篇
Vue 14 挑戰 TO DO LIST
下一篇
Vue 16 進階模板語法介紹 (2) - v-for 使用細節
系列文
學習 vue 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言